<template>
	<view class="container">
		<view class="welcome">
			<view class="">感谢您入住我们的酒店</view>
			<view class="">请填写预开发票信息</view>
		</view>
		<view class="form-warpper">
			<view class="form-item">
				<view class="label">开票名称<text>*</text></view>
				<view class="input"><input v-model="form.name" placeholder="请输入开票名称"
						border="none" /></view>
			</view>
			<view class="form-item">
				<view class="label">证件号码<text>*</text></view>
				<view class="input"><input v-model="form.account" placeholder="请输入证件号码"
						border="none" /></view>
			</view>
			<view class="form-item">
				<view class="label">地址电话<text>*</text></view>
				<view class="input"><input v-model="form.addressAndMobile" placeholder="请输入地址电话"
						border="none" /></view>
			</view>
			<view class="form-item">
				<view class="label">开票内容<text>*</text></view>
				<view class="input"><input v-model="form.invoiceService" placeholder="请输入开票内容"
						border="none" /></view>
			</view>
			<view class="form-item">
				<view class="label">预开金额</view>
				<view class="input"><input v-model="form.price" type="number" placeholder="请输入预开金额"
						border="none" /></view>
			</view>
			<view class="form-item">
				<view class="label">发票备注</view>
				<view class="input"><input v-model="form.remark" placeholder="请输入发票备注"
						border="none" /></view>
			</view>
		</view>
		<view class="form-warpper">
			<view class="form-item">
				<view class="label">取票方式</view>
				<view class="input">
					<radio-group @change="radioChange" class="radio">
						<label style="display: flex;align-items: center;">
							<radio :value="1" :checked="1 == form.type" />
							<view style="font-size: 28rpx;">邮寄</view>
						</label>
						<label style="display: flex;align-items: center;margin-left: 12rpx;">
							<radio :value="0" :checked="0 == form.type" />
							<view style="font-size: 28rpx;">店内领取</view>
						</label>
						<label style="display: flex;align-items: center;margin-left: 12rpx;">
							<radio :value="2" :checked="2 == form.type" />
							<view style="font-size: 28rpx;">电子发票</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="form-item" v-if="form.type == 1">
				<view class="label">邮寄地址<text>*</text></view>
				<view class="input"><input v-model="form.yjaddress" placeholder="请输入邮寄地址"
						border="none" /></view>
			</view>
			<view class="form-item" v-if="form.type == 1">
				<view class="label">联系电话<text>*</text></view>
				<view class="input"><input v-model="form.yjmobile" type="number" maxlength="11" placeholder="请输入联系电话"
						inputAlign="right" border="none" /></view>
			</view>
			<view class="form-item" v-if="form.type == 1">
				<view class="label">收件人<text>*</text></view>
				<view class="input"><input v-model="form.yjrealname" placeholder="请输入收件人"
						border="none" /></view>
			</view>
			<view class="form-item" v-if="form.type == 2">
				<view class="label">邮箱收取<text>*</text></view>
				<view class="input"><input v-model="form.yjemail" placeholder="请输入邮箱"
						border="none" /></view>
			</view>
		</view>
		<view class="form-warpper">
			<view class="form-item">
				<view class="label" style="font-weight: bold;">发票内容填写说明：</view>
			</view>
			<view class="ps">
				<view class="">
					1. 名称请您填写企业注册全称，个人请填写姓名；
				</view>
				<view class="">
					2. 证件号码填写企业识别号，个人填写身份证号；
				</view>
				<view class="">
					3. 地址填写注册地址或身份证地址，电话填在末尾即可；
				</view>
				<view class="">
					4. 预开金额为您想开的发票金额，不填为默认房费金额；
				</view>
				<view class="">
					5. 开票内容为您想开的发票内容例如住宿费、会议费等；
				</view>
				<view class="">
					6. 发票备注为票内备注框的内容，如无特殊要求可不填；
				</view>
				<view class="">
					7. 发票需要邮寄的请如实填写收件人信息，邮费为到付；
				</view>
				<view class="">
					8. 申请开具电子发票的请留下您的邮件地址及电话号码。
				</view>
			</view>
		</view>
		<view class="submit-btn" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	import {ykfp} from '@/api/store.js'
	export default {
		data() {
			return {
				form: {
					type: 1,
					default: true,
				},
				shopId:0
			};
		},
		onLoad(option) {
			if (option.shopId) {
				this.shopId = option.shopId
			}
		},
		methods: {
			radioChange(evt) {
				console.log(evt)
				this.form.type = evt.detail.value
			},
			submit() {
				if(!this.form.name){
					uni.showToast({
						title: '请输入开票名称',
						icon: 'none'
					})
					return
				}
				if(!this.form.account){
					uni.showToast({
						title: '请输入证件号码',
						icon: 'none'
					})
					return
				}
				if(!this.form.addressAndMobile){
					uni.showToast({
						title: '请输入地址电话',
						icon: 'none'
					})
					return
				}
				if(!this.form.invoiceService){
					uni.showToast({
						title: '请输入开票内容',
						icon: 'none'
					})
					return
				}
				if(this.form.type==1){
					if(!this.form.yjaddress){
						uni.showToast({
							title: '请输入邮寄地址',
							icon: 'none'
						})
						return
					}
					if(!this.form.yjmobile){
						uni.showToast({
							title: '请输入联系电话',
							icon: 'none'
						})
						return
					}
					if(!this.form.yjrealname){
						uni.showToast({
							title: '请输入收件人',
							icon: 'none'
						})
						return
					}
				}
				if(this.form.type==2){
					if(!this.form.yjemail){
						uni.showToast({
							title: '请输入收取邮箱',
							icon: 'none'
						})
						return
					}
				}
				const params = {
					...this.form,
					shopId: this.shopId
				}
				ykfp(params).then(respanse => {
						uni.showToast({
							title: "发票信息已提交",
							icon: 'none',
							duration: 2000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 36rpx;

		.welcome {
			padding: 30rpx 30rpx 0;
			text-align: center;
			font-size: 36rpx;
			line-height: 1.3;
			color: #333;
			font-weight: bold;
		}

		.form-warpper {
			background-color: #fff;
			padding: 20rpx 25rpx;
			margin: 28rpx 25rpx 0;
			border-radius: 25rpx;

			.form-item {
				padding: 16rpx;
				min-height: 78rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.label {
					line-height: 1.3;
					font-size: 30rpx;
					font-weight: 500;
					color: #000000;

					text {
						color: #FF5502;
					}
				}

				.input {
					font-size: 30rpx;
					font-weight: 500;
					color: #000000;
					margin-left: 12rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					input{
						text-align: right;
					}

					&.readyOnly {
						color: #999999;
					}
					.radio{
						display: flex;
					}
					// 取消单选里面的边框线
					/deep/.uni-list-cell::after {
					  background-color: #fff;
					}
					/deep/ radio .wx-radio-input{
					border-radius: 50%;/* 圆角 */
					width: 28rpx;
					height: 28rpx;
					background: none;
					}
					/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
					/deep/ radio .wx-radio-input.wx-radio-input-checked{
					border: none !important;
					background: #FF5502 !important;
					}
					/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
					 /deep/ radio .wx-radio-input.wx-radio-input-checked::before{
					line-height: 28rpx;
					text-align: center;
					font-size:28rpx; /* 对勾大小 30rpx */
					color:#FFF; /* 对勾颜色 白色 */
					// background: transparent;
					// transform:translate(-50%, -50%) scale(1);
					// -webkit-transform:translate(-50%, -50%) scale(1);
					}
				}
			}

			.line {
				height: 1rpx;
				background: #E9E9E9;
				margin: 10rpx 0;
			}

			.ps {
				margin-top: -20rpx;
				font-size: 26rpx;
				line-height: 1.8;
				color: #666;
			}
		}

		.submit-btn {
			margin: 40rpx 60rpx 0;
			background-color: #FF5502;
			font-size: 33rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 93rpx;
			border-radius: 35rpx;
			text-align: center;
		}
	}
</style>